<template>
  <div style="background:#eee;">
    <div id="slider">
      <div class="window" @mouseover="stop" @mouseleave="play">
        <ul class="container" :style="containerStyle">
          <li>
            <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt />
          </li>
          <li v-for="(item, index) in sliders" :key="index">
            <img :style="{width:imgWidth+'px'}" :src="item.img" alt />
          </li>
          <li>
            <img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt />
          </li>
        </ul>
        <ul class="direction">
          <li class="left" @click="move(790, 1, speed)">
            <svg
              class="icon"
              width="30px"
              height="30.00px"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="#ffffff"
                d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
              />
            </svg>
          </li>
          <li class="right" @click="move(790, -1, speed)">
            <svg
              class="icon"
              width="30px"
              height="30.00px"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill="#ffffff"
                d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
              />
            </svg>
          </li>
        </ul>
        <ul class="dots">
          <li
            v-for="(dot, i) in sliders"
            :key="i"
            :class="{dotted: i === (currentIndex-1)}"
            @click="jump(i+1)"
          ></li>
        </ul>
      </div>
    </div>
    <div class="zuo">
      <img src="../img/7.png" alt />
    </div>
    <div class="you">
      <ul>
        <li>
          <img
            src="https://pic.flnet.com/public/images/f7/2e/86/fac8097333339b2131bc0268470a01facdd6c646.jpg?1563756812#w"
            alt
          />
        </li>
        <li>
          <img
            src="https://pic.flnet.com/public/images/ec/f2/7c/00922af04e96114bfa948e074c672a2d702f26f6.jpg?1564122111#w"
            alt
          />
        </li>
        <li>
          <img
            src="https://pic.flnet.com/public/images/f2/d9/00/707a4ec4fec5413037a9e81f499af870983c12bf.jpg?1564359131#w"
            alt
          />
        </li>
      </ul>
    </div>
    <div class="bian">
      <img src="../img/8.png" alt />
    </div>
    <div class="shop">
      <div class="firsts">
        <div>
          <h2>
            <span class="one">小富优选</span>
            <span class="twos">官方严选免运费</span>
            <span class="tree">去探索</span>
            <ul>
              <li>
                <img
                  src="https://pic.flnet.com/public/images/fe/03/3d/2f5356ac0e0161270787e347b8698581dbeb7cea.jpg?1560741147#h"
                  alt
                />
              </li>
              <li>
                <img
                  src="https://pic.flnet.com/public/images/38/7b/51/f484accd94e07ee96daceb676541e00051c7f9ae.jpg?1562305293#h"
                  alt
                />
              </li>
              <li>
                <img
                  src="https://pic.flnet.com/public/images/59/81/3a/32a72d18c9c90d841e6387e2e1b311790aac7957.jpg?1562305302#h"
                  alt
                />
              </li>
            </ul>
          </h2>
        </div>
        <div class="yi">
          <h2>
            <span class="one">今日特价</span>
          </h2>
          <ol>
            <li>
              <img
                src="https://pic.flnet.com/public/images/ef/6c/a0/ae5194593a80f54a3722d5fe440b51af210bcfb1.jpg?1564965632#w"
                alt
              />
            </li>
            <li>
              <img
                src="https://pic.flnet.com/public/images/10/e5/0f/29c80a54a31c5e9da0cf3d3a3eb24a593ecd06d9.jpg?1564965638#w"
                alt
              />
            </li>
          </ol>
        </div>
        <div class="yi">
          <h2>
            <span class="one">领券中心</span>
            <span class="tree">更多</span>
          </h2>
          <ol class="pic">
            <li>
              <img src="../img/001.png" alt />
            </li>
            <li>
              <img src="../img/002.png" alt />
            </li>
            <li>
              <img src="../img/003.png" alt />
            </li>
          </ol>
        </div>
      </div>
      <div class="firsts">
        <div class="contents">
          <h2>
            <span class="sear">大家都在搜</span>
            <span class="last">百人口碑好評清单</span>
          </h2>
          <ul class="ul">
            <li>
              <img
                src="https://pic.flnet.com/public/images/e4/c3/ad/eb1359064a686c4a0f52668ac3e82d61a6f84ae3.png?1564393800#h"
                alt
              />
            </li>
            <li class="sec">
              <p>日本原装,进口面板...</p>
              <span>夏普(SHARP) LCD-45SF470A 45英寸 网络 智能 液晶 平板电视 / 1135人评价</span>
            </li>
          </ul>
        </div>
        <div class="hou">
          <h2>
            <span class="sear">最新热单</span>
            <span class="last">人气好货内部价</span>
          </h2>
          <ul class="ul">
            <li>
              <img
                src="https://pic.flnet.com/public/images/45/15/30/7d77fc49ac320970cc1441ed861710b5d76dddf0.jpg?1560245401#h"
                alt
              />
              <div>
                <span>夏普60寸4K</span>
                <p>富士康直供人工智能电视</p>
              </div>
            </li>
            <li>
              <img
                src="https://pic.flnet.com/public/images/45/15/30/7d77fc49ac320970cc1441ed861710b5d76dddf0.jpg?1560245401#h"
                alt
              />
              <div>
                <span>夏普60寸4K</span>
                <p>富士康直供人工智能电视</p>
              </div>
            </li>
            <li>
              <img
                src="https://pic.flnet.com/public/images/45/15/30/7d77fc49ac320970cc1441ed861710b5d76dddf0.jpg?1560245401#h"
                alt
              />
              <div>
                <span>夏普60寸4K</span>
                <p>富士康直供人工智能电视</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="firsts">
          <div class="title">
            <h2>先锋智能好物</h2>
            <h3>畅享智能潮生活</h3>
            <span class="page-mod-more">更多&gt;&gt;</span>
          </div>
        </div>
        <div class="shopping">
          <div class="total">
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/75/db/7b/2cec96615cb761d5934a6cbc6470df1ee94955a9.jpg?1564643866#h"
                alt
              />
            </div>
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/8f/8b/ac/c0e97ed8ea50d44830725b2d2f1bbab751a8b25a.jpg?1562317109#h"
                alt
              />
            </div>
            <div class="shop2">
              <img
                src="https://pic.flnet.com/public/images/ac/50/15/2c3ae96f0904bd929e328f280cb6fe45fb369ba8.jpg?1564046328#w"
                alt
              />
              <ul>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/35/73/90/5a6a5ea98dd5457567f09d8cbb3549d9675b5f26.jpg?1562034668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/cf/07/e6/1cd30ea5ec15f6b483ff5de09d48038ba48098af.jpg?1562203668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/47/88/1f/e9f90109b74c87b3efba170969ee2b683687c355.jpg?1564967478#h"
                    alt
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="firsts">
          <div class="title">
            <h2>先锋智能好物</h2>
            <h3>畅享智能潮生活</h3>
            <span class="page-mod-more">更多&gt;&gt;</span>
          </div>
        </div>
        <div class="shopping">
          <div class="total">
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/75/db/7b/2cec96615cb761d5934a6cbc6470df1ee94955a9.jpg?1564643866#h"
                alt
              />
            </div>
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/8f/8b/ac/c0e97ed8ea50d44830725b2d2f1bbab751a8b25a.jpg?1562317109#h"
                alt
              />
            </div>
            <div class="shop2">
              <img
                src="https://pic.flnet.com/public/images/ac/50/15/2c3ae96f0904bd929e328f280cb6fe45fb369ba8.jpg?1564046328#w"
                alt
              />
              <ul>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/35/73/90/5a6a5ea98dd5457567f09d8cbb3549d9675b5f26.jpg?1562034668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/cf/07/e6/1cd30ea5ec15f6b483ff5de09d48038ba48098af.jpg?1562203668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/47/88/1f/e9f90109b74c87b3efba170969ee2b683687c355.jpg?1564967478#h"
                    alt
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="firsts">
          <div class="title">
            <h2>智能家居推荐</h2>
            <h3>享受智能生活乐趣</h3>
            <span class="page-mod-more">更多&gt;&gt;</span>
          </div>
        </div>
        <div class="shopping">
          <div class="total">
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/75/db/7b/2cec96615cb761d5934a6cbc6470df1ee94955a9.jpg?1564643866#h"
                alt
              />
            </div>
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/8f/8b/ac/c0e97ed8ea50d44830725b2d2f1bbab751a8b25a.jpg?1562317109#h"
                alt
              />
            </div>
            <div class="shop2">
              <img
                src="https://pic.flnet.com/public/images/ac/50/15/2c3ae96f0904bd929e328f280cb6fe45fb369ba8.jpg?1564046328#w"
                alt
              />
              <ul>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/35/73/90/5a6a5ea98dd5457567f09d8cbb3549d9675b5f26.jpg?1562034668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/cf/07/e6/1cd30ea5ec15f6b483ff5de09d48038ba48098af.jpg?1562203668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/47/88/1f/e9f90109b74c87b3efba170969ee2b683687c355.jpg?1564967478#h"
                    alt
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="firsts">
          <div class="title">
            <h2>美好生活达人</h2>
            <h3>精致时尚 格调有品</h3>
            <span class="page-mod-more">更多&gt;&gt;</span>
          </div>
        </div>
        <div class="shopping">
          <div class="total">
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/75/db/7b/2cec96615cb761d5934a6cbc6470df1ee94955a9.jpg?1564643866#h"
                alt
              />
            </div>
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/8f/8b/ac/c0e97ed8ea50d44830725b2d2f1bbab751a8b25a.jpg?1562317109#h"
                alt
              />
            </div>
            <div class="shop2">
              <img
                src="https://pic.flnet.com/public/images/ac/50/15/2c3ae96f0904bd929e328f280cb6fe45fb369ba8.jpg?1564046328#w"
                alt
              />
              <ul>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/35/73/90/5a6a5ea98dd5457567f09d8cbb3549d9675b5f26.jpg?1562034668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/cf/07/e6/1cd30ea5ec15f6b483ff5de09d48038ba48098af.jpg?1562203668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/47/88/1f/e9f90109b74c87b3efba170969ee2b683687c355.jpg?1564967478#h"
                    alt
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="firsts">
          <div class="title">
            <h2>摩登时尚</h2>
            <h3>魅力出行 时尚格调</h3>
            <span class="page-mod-more">更多&gt;&gt;</span>
          </div>
        </div>
        <div class="shopping">
          <div class="total">
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/75/db/7b/2cec96615cb761d5934a6cbc6470df1ee94955a9.jpg?1564643866#h"
                alt
              />
            </div>
            <div class="shop1">
              <img
                src="https://pic.flnet.com/public/images/8f/8b/ac/c0e97ed8ea50d44830725b2d2f1bbab751a8b25a.jpg?1562317109#h"
                alt
              />
            </div>
            <div class="shop2">
              <img
                src="https://pic.flnet.com/public/images/ac/50/15/2c3ae96f0904bd929e328f280cb6fe45fb369ba8.jpg?1564046328#w"
                alt
              />
              <ul>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/35/73/90/5a6a5ea98dd5457567f09d8cbb3549d9675b5f26.jpg?1562034668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/cf/07/e6/1cd30ea5ec15f6b483ff5de09d48038ba48098af.jpg?1562203668#h"
                    alt
                  />
                </li>
                <li>
                  <img
                    src="https://pic.flnet.com/public/images/47/88/1f/e9f90109b74c87b3efba170969ee2b683687c355.jpg?1564967478#h"
                    alt
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="firsts">
          <div class="title">
            <h2>猜你喜欢</h2>
            <h3>一次逛个够</h3>
          </div>
        </div>
        <div class="goods">
          <ul>
            <li v-for="(item ,i) in list" :key="i">
              <img :src="item.img" style="height:180px;height:180px" />
              <h2>{{item.title}}</h2>
              <span>{{item.price}}</span>
            </li>
          </ul>
        </div>
        <div class="firsts">
          <div class="title"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "slider",
  props: {
    initialSpeed: {
      type: Number,
      default: 30
    },
    initialInterval: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      sliders: [
        {
          img: require("../img/1.jpg")
        },
        {
          img: require("../img/2.jpg")
        },
        {
          img: require("../img/3.jpg")
        },
        {
          img: require("../img/4.jpg")
        },
        {
          img: require("../img/5.jpg")
        },
        {
          img: require("../img/6.jpg")
        }
      ],
      imgWidth: 790,
      currentIndex: 1,
      distance: -790,
      transitionEnd: true,
      speed: this.initialSpeed,
      list: []
    };
  },
  computed: {
    containerStyle() {
      return {
        transform: `translate3d(${this.distance}px, 0, 0)`
      };
    },
    interval() {
      return this.initialInterval * 1000;
    }
  },
  mounted() {
    this.init();
    this.getData();
  },
  methods: {
    getData() {
      axios({
        method: "get",
        url: "http://localhost/api.php/spsj",
        params: {
          transform: 1,
          order: "id,desc"
        }
      }).then(res => {
        // console.log(res.data.spsj);
        this.list = res.data.spsj;
      });
    },
    init() {
      this.play();
      window.onblur = function() {
        this.stop();
      }.bind(this);
      window.onfocus = function() {
        this.play();
      }.bind(this);
    },
    move(offset, direction, speed) {
      if (!this.transitionEnd) return;
      this.transitionEnd = false;
      direction === -1
        ? (this.currentIndex += offset / 790)
        : (this.currentIndex -= offset / 790);
      if (this.currentIndex > 6) this.currentIndex = 1;
      if (this.currentIndex < 1) this.currentIndex = 6;

      const destination = this.distance + offset * direction;
      this.animate(destination, direction, speed);
    },
    animate(des, direc, speed) {
      if (this.temp) {
        window.clearInterval(this.temp);
        this.temp = null;
      }
      this.temp = window.setInterval(() => {
        if (
          (direc === -1 && des < this.distance) ||
          (direc === 1 && des > this.distance)
        ) {
          this.distance += speed * direc;
        } else {
          this.transitionEnd = true;
          window.clearInterval(this.temp);
          this.distance = des;
          if (des < -4740) this.distance = -790;
          if (des > -790) this.distance = -4740;
        }
      }, 20);
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * 790;
      const jumpSpeed =
        Math.abs(index - this.currentIndex) === 0
          ? this.speed
          : Math.abs(index - this.currentIndex) * this.speed;
      this.move(offset, direction, jumpSpeed);
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = window.setInterval(() => {
        this.move(790, -1, this.speed);
      }, this.interval);
    },
    stop() {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style>
.goods {
  width: 1200px;
  margin: 0 auto;
}
.goods ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.goods ul li {
  padding: 10px;
  width: 232px;
  height: 295px;
  background: #fff;
  margin-bottom: 10px;
}
.goods ul li span {
  font-size: 16px;
  color: #e82100;
}
.goods ul li h2 {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  max-height: 48px;
  overflow: hidden;
  margin-bottom: 10px;
  height: 48px;
  font-weight: 100;
}
.shop2 {
  display: inline-block;
  position: relative;
  text-align: justify;
}
.shop2 ul {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}
.shop2 ul li {
  width: 183px;
  height: 175px;
}
.shopping {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
}
.shop1 {
  display: inline-block;
  margin-right: 10px;
}
.total {
  padding: 20px;
}
.firsts .title {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  margin-top: 30px;
  background: #eee;
  padding: 0;
  text-align: center;
  width: 100%;
}
.title h2 {
  font-size: 24px;
  font-weight: normal;
  color: #333;
}
.title h3 {
  font-size: 16px;
  color: #666;
  font-weight: normal;
}
.page-mod-more {
  position: absolute;
  right: 0;
  font-size: 12px;
  color: #999999;
  line-height: 1.2em;
  bottom: 0;
}
.contents,
.hou {
  margin-top: 8px;
  width: 595px;
  height: 171px;
  overflow: hidden;
}
.hou {
  margin-left: 10px;
}
.hou .ul li div {
  display: inline-block;
  width: 80px;
  margin-left: 5px;
  vertical-align: middle;
  padding: 0;
}
.contents .ul,
.hou .ul {
  display: flex;
  align-items: center;
}
.hou .ul li {
  display: flex;
  align-items: center;
}
.contents .ul li img,
.hou .ul li img {
  width: 90px;
  height: 90px;
}
.contents .sear,
.hou .sear {
  font-size: 18px;
  color: #333;
  margin-right: 6px;
}
.contents .last,
.hou .last {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}
.shop {
  background: #eee;
  padding-top: 30px;
}
.shop .firsts {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.firsts .yi {
  margin-left: 10px;
  width: 292px;
}
.yi ol {
  margin-top: 18px;
}
.yi .pic li img {
  width: 252px;
  height: 83px;
}
.firsts div {
  padding: 15px;
  background: #fff;
}
.firsts .twos {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}
.firsts .tree {
  font-size: 12px;
  color: #999;
  float: right;
  margin-top: 7px;
}
.firsts .one {
  font-size: 18px;
  color: #333;
}
.firsts h2 ul {
  display: flex;
  margin-top: 15px;
}
.firsts ul li {
  padding: 5px;
}
.firsts ul li img {
  height: 237px;
  width: 178px;
}
.bian {
  top: 201px;
  display: inline-block;
}
.bian img {
  top: 203px;
  right: -188px;
  position: absolute;
  right: 14px;
  height: 445px;
}
.you {
  position: absolute;
  top: 200px;
  right: 172px;
  width: 190px;
}
.you ul{
  height: 445px;
}
.you ul li {
  padding: 3px 0 1px;
}
.zuo {
  display: block;
  width: 360px;
  height: 445px;
  position: absolute;
  top: 202px;
  left: -192px;
  border: none;
}
.zuo img{
  height: 445px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
#slider {
  text-align: center;
}
.window {
  position: relative;
  width: 790px;
  height: 450px;
  margin-left: 359px;
  overflow: hidden;
}
.container {
  display: flex;
  position: absolute;
}
.left,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
}
.left {
  left: 3%;
  padding-left: 12px;
  padding-top: 10px;
}
.right {
  right: 3%;
  padding-right: 12px;
  padding-top: 10px;
}
img {
  user-select: none;
}
.dots {
  position: absolute;
  bottom: 19px;
  left: 50%;
  transform: translateX(-50%);
}
.dots li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 3px;
  border: 1px solid white;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}
.dots .dotted {
  background-color: #fff;
}
</style>
